import { Link } from 'react-router-dom'
import React, { Component } from 'react';
import Head from '../../components/head/Head';
import './App.css';
import axios from 'axios';
var url="http://aircommunity.net/api/v2/";
class App extends Component {
  constructor() {
    super();
    this.state = {
      index: 1,
      data: [],
      isManyNav: false,
      toursArr:[],
      transportsNav:[],
      transportArr:[]

    }
    this.get(url+'tours/flight/cities',(res)=>{
      this.setState({
        data: res.data,
        isManyNav: res.data.length>5?false:true
      }, () => {

      })
    });
    this.get(url+'tours',(res)=>{
      var data=res.data.content;
      for(let i=0;i<data.length;i++){
        if(i>5){
          break;
        }
        this.state.toursArr.push(<li key={i}><Link to="/About">{data[i].name}</Link></li>)
      }
      this.setStatePromise(
        ({
          toursArr
        }) => ({
          toursArr: this.state.toursArr
        })).then(() => {
        })
    });
    // 通勤航旅导航
    this.get(url+'transports/flight/families',(res)=>{
      var data=res.data;
      var arr=[];
      for(let i=0;i<data.length;i++){
        arr.push(<li key={i}>{data[i].name}</li>)
      }
      
      this.setStatePromise(
        ({
          transportsNav
        }) => ({
          transportsNav: arr
        })).then(() => {
            console.log(this.state);
        })
    });
    // 内容
    this.get(url+'transports',(res)=>{
      var data=res.data.content;
      var arr=[];
      
      for(let i=0;i<data.length;i++){
        if(i>5){
          break;
        }
        arr.push(<li key={i}><Link to="/About">{data[i].name}</Link></li>)
      }
      this.setStatePromise(
        ({
          transportArr
        }) => ({
          transportArr: arr
        })).then(() => {
        })
    });
  }
  get(Url,fn) {
    axios.get(Url,fn).then(fn).catch((err) => {
    })
  }
  handleLookMore(e){
    this.setStatePromise(
      ({
        isManyNav
      }) => ({
        isManyNav: !this.state.isManyNav
      })).then(() => {
      })
  }
  setStatePromise(updator) {
    return new Promise(function (resolve, reject) {
        this.setState(updator, resolve);
    }.bind(this))
  }
  render() {
    let data = this.state.data;
    let arr=[];
    let arr2=[];
    if(data.length>5){
      for (let i = 0; i < data.length; i++) {
        if(i<=4){
          arr.push(<li key={i}>{data[i]}</li>);
        }else{
          arr2.push(<li key={i}>{data[i]}</li>);
        }
  
      }
    }else{
      for (let i = 0; i < data.length; i++) {
        arr.push(<li key={i}>{data[i]}</li>);
      }
    }
    return (
      <div>
        <Head childrenIndex={this.state.index} />
        <div className="container clear">
          <div className="content">
            <div className="clear box">
            {/* 左侧 */}
              <div className="fl">
                  <span className="line"></span>
                  <span className="text">观光飞行</span>
              </div>
              {/* 右侧 */}
              <div className="tabNav-list fr">
                <ul className="clear">
                  <li className="active">全部</li>
                  {arr}
                  <li onClick={(e)=>this.handleLookMore(e)}>{this.state.isManyNav?'收起':'查看'}更多</li>
                </ul>
              </div>
            
            </div> 
            <ul className={this.state.isManyNav?'tabNav-list clear':'tabNav-list clear hide'}>
                {arr2}
            </ul> 
            <div className="toursMsg">
              <ul>
                {this.state.toursArr}
              </ul>
            </div>
          </div>

          {/* 通勤航旅 */}
          <div className="content">
            <div className="clear box">
            {/* 左侧 */}
              <div className="fl">
                  <span className="line"></span>
                  <span className="text">通勤航旅 </span>
              </div>
              {/* 右侧 */}
              <div className="tabNav-list fr">
                <ul className="clear">
                  <li className="active">全部</li>
                  {this.state.transportsNav}
                </ul>
              </div>

            </div>  
            <div className="toursMsg">
              <ul>
                {this.state.transportArr}
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default App;
